
<template>
  <div style="height: 100%; width: 100%; position: relative">
    <div class="pagetop">
      <div class="search-title">快速查询</div>
      <el-input
        v-model="txtsearch"
        placeholder="实验组合代号|名称|输入码"
        style="width: 200px"
      ></el-input>
      <div class="search-title">检验组</div>
      <el-select
        v-model="groupsearch"
        clearable
        @change="groupsearchChange"
        style="width: 200px"
        popper-class="mini-select"
      >
        <el-option
          :value="item.labgroupid"
          :label="item.labgroupname"
          :key="item.labgroupid"
          v-for="item in gpinfo.Item4"
        ></el-option>
      </el-select>
      <div class="top-deal">
        <el-button
          @click="InitPage"
          icon="el-icon-search"
          type="primary"
          v-has="'PINQUERY'"
          :disabled="changeflag"
          >查询</el-button
        >
        <el-button
          @click="btnAdd"
          icon="el-icon-plus"
          v-has="'PADD'"
          :disabled="changeflag"
          >新增</el-button
        >
        <el-button
          @click="btnDelete"
          icon="el-icon-delete"
          v-has="'PDELETE'"
          :disabled="changeflag"
          >删除</el-button
        >
        <el-button
          @click="btnSave"
          icon="el-icon-document"
          v-has="'PMODIFY'"
          :disabled="!changeflag"
          >保存</el-button
        >
        <el-button
          @click="btnClear"
          icon="el-icon-close"
          :disabled="!changeflag"
          >取消</el-button
        >
        <el-button @click="btnExport" icon="el-icon-upload2">导出</el-button>
            <el-button icon="el-icon-files" @click="ImportCsv" ref="importFile">导入</el-button>
            <div class="upload-button">
                <el-upload ref="upload" :action="url" accept=".dat" :before-upload="beforeUploadFile" :on-change="fileChange" :show-file-list="showFile" :data="updata" :http-request="uploadOpt">
                    <el-button size="small" plain>选择文件</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传DAT(*dat)文件，且不超过10M</div> -->
                </el-upload>
            </div>
      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center">
        <vxe-table
          :data.sync="list"
          :loading="loading"
          :keyboard-config="keyConfig"
          :row-class-name="rowClassName1"
          :select-config="selectConfig"
          :sort-config="{ trigger: 'cell' }"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
            activeMethod: activeCell,
            showStatus: true,
            showIcon: false,
          }"
          @current-change="currentChangeEvent"
          border
          fit
          height="auto"
          header-align="center"
          highlight-current-row
          highlight-hover-row
          highlight-hover-column
          ref="xTable1"
          resizable
          show-header-overflow="tooltip"
          show-overflow="tooltip"
          size="mini"
          stripe
        >
          <vxe-table-column
            type="index"
            title="NO."
            width="45"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            field="testgroupno"
            title="实验组合代码"
            width="89"
          ></vxe-table-column>
          <vxe-table-column
            field="testgroupname"
            title="实验组合名称"
            width="105"
          ></vxe-table-column>
          <vxe-table-column
            field="lathname"
            title="板条名称"
            width="100"
          ></vxe-table-column>
          <vxe-table-column
            field="instrno"
            title="默认仪器"
            width="90"
            :edit-render="{ name: 'select', options: BactInstrument }"
          ></vxe-table-column>
          <vxe-table-column
            field="testkind"
            title="试验类别"
            width="60"
            :edit-render="{ name: 'select', options: $opt.InstrKind }"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            field="defpanelno"
            title="板条默认批号"
            width="90"
          ></vxe-table-column>
          <vxe-table-column
            field="printbarcnt"
            title="打印标签数量"
            width="90"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            field="seq"
            title="序号"
            width="50"
            header-align="center"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            field="inputcode"
            title="输入码"
            width="90"
          ></vxe-table-column>
        </vxe-table>
      </div>
      <div
        class="middle-right"
        v-loading="pageinitloading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <rm-layout-top splitcolor="#DoderBlue" :splitwidth="5" :fixsize="165">
          <template v-slot:fix>
            <div style="height: 165px; border: 1px solid #ccc">
              <el-form
                :label-position="labelPosition"
                label-width="100px"
                :model="bact_testgroup"
              >
                <table style="width: 100%; font-size: 12px">
                  <tr>
                    <td align="right" style="color: #f56c6c">实验组合代码</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.testgroupno"
                        @input="hasChange"
                        :readonly="actionindex == 'M'"
                        @change="chktestgroupno"
                        ref="input0"
                        @keyup.enter.native="nextFocus(0)"
                      ></el-input>
                    </td>
                    <td align="right">实验组合名称</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.testgroupname"
                        @input="hasChange"
                        @change="CreateInputcode"
                        ref="input1"
                        @keyup.enter.native="nextFocus(1)"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td align="right">仪器板条名称</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.lathname"
                        @input="hasChange"
                        ref="input2"
                        @keyup.enter.native="nextFocus(2)"
                      ></el-input>
                    </td>
                    <td align="right">板条默认批号</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.defpanelno"
                        @input="hasChange"
                        ref="input3"
                        @keyup.enter.native="nextFocus(3)"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td align="right">输入码</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.inputcode"
                        @input="hasChange"
                        ref="input4"
                        @keyup.enter.native="nextFocus(4)"
                      ></el-input>
                    </td>
                    <td align="right">序号</td>
                    <td>
                      <el-input
                        v-model="bact_testgroup.seq"
                        @input="hasChange"
                        ref="input5"
                        @keyup.enter.native="nextFocus(5)"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>打印标签数量</td>
                    <td>
                      <el-input
                        v-model.number="bact_testgroup.printbarcnt"
                        @input="hasChange"
                        ref="input6"
                        @keyup.enter.native="nextFocus(6)"
                      ></el-input>
                    </td>
                    <td align="right">试验类别</td>
                    <td>
                      <el-select
                        v-model="bact_testgroup.testkind"
                        ref="input7"
                        @keyup.enter.native="nextFocus(7)"
                        @change="testkindChange"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="(item, index) in $opt.InstrKind"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td align="right" style="color: #f56c6c">默认仪器</td>
                    <td>
                      <!-- <el-autocomplete class="inline-input" v-model="bact_testgroup.instrno" :fetch-suggestions="querySearch" @select="handleSelect" style="width:100%" @input="hasChange"></el-autocomplete> -->
                      <!-- <el-select v-model="bact_testgroup.instrno" style="width:100%" @change="hasChange" ref="input6" @keyup.enter.native="nextFocus(6)">
                                                <el-option v-for="(item,index) in BactInstrument" :key="index" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select> -->
                      <rm-ddl-common
                        @change="backinstrumentChange"
                        datatype="backinstrument"
                        dataname="默认仪器"
                        :labgroupid="groupsearch"
                        v-model="bact_testgroup.instrno"
                        width="100%"
                        ref="input8"
                        @keyup.enter.native="nextFocus(8)"
                      ></rm-ddl-common>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4">
                      <span style="color: #1e90ff"
                        >说明：仪器为空时初鉴使用，仪器不为空时鉴定使用，板条名称必须和仪器传输过来的名称一致</span
                      >
                    </td>
                  </tr>
                </table>
              </el-form>
            </div>
          </template>
          <div style="height: 100%; width: 100%; background-color: #ddccbb">
            <vxe-table
              :data="tableData2"
              :loading="loading"
              :keyboard-config="keyConfig"
              :select-config="selectConfig"
              :sort-config="{ trigger: 'cell' }"
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showStatus: true,
                activeMethod: activeMethod,
                showIcon: false,
              }"
              border
              fit
              height="auto"
              header-align="center"
              highlight-current-row
              highlight-hover-row
              highlight-hover-column
              ref="xTable2"
              resizable
              show-header-overflow="tooltip"
              show-overflow="tooltip"
              size="mini"
              stripe
              :row-class-name="rowClassName2"
            >
              <vxe-table-column
                type="index"
                title="NO."
                width="45"
                align="center"
              ></vxe-table-column>
              <!-- <vxe-table-column
                field="testgroupno"
                title="实验组合代码"
                width="105"
              ></vxe-table-column> -->
              <vxe-table-column field="testno" :title="bact_testgroup.testkind != 3? '实验名称': '抗生素名称'" width="205">
                <template v-slot="{ row }">
                  <rm-ddl-common
                    v-if="bact_testgroup.testkind != 3"
                    @change="testchange"
                    datatype="bacttest"
                    dataname="鉴定试验选择"
                    v-model="row.testno"
                    width="100%"
                  ></rm-ddl-common>
                  <rm-ddl-common
                    v-if="bact_testgroup.testkind == 3"
                    @change="testchange"
                    datatype="labmed"
                    dataname="抗生素选择"
                    v-model="row.testno"
                    width="100%"
                  ></rm-ddl-common>
                </template>
              </vxe-table-column>
              <vxe-table-column
                field="seq"
                title="序号"
                width="70"
                :edit-render="{
                  name: 'input',
                  autoselect: true,
                  events: { change: hasChange },
                }"
                align="center"
              >
              </vxe-table-column>
              <template v-slot:fix>
                <div
                  style="
                    font-size: 12px;
                    padding-top: 3px;
                    background-color: #fff;
                    text-align: center;
                  "
                >
                  <table style="border-spacing: 10px; width: 100%">
                    <tr>
                      <td>
                        <el-button
                          style="background-color: #e6e6e6; color: black"
                          @click="btnAddDetail"
                          >新增明细</el-button
                        >
                      </td>
                      <td>
                        <el-button
                          style="background-color: #e6e6e6; color: black"
                          @click="btnDelDetail"
                          >删除明细</el-button
                        >
                      </td>
                    </tr>
                  </table>
                </div>
              </template>
            </vxe-table>
          </div>
        </rm-layout-top>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS845",
  data() {
    return {
      txtsearch: "",
      groupsearch: 0,
      changeflag: false,
      loading: false,
      labelPosition: "right",
      bact_testgroup: {
        testgroupno: "",
        testgroupname: "",
        lathname: "",
        instrno: "",
        inputcode: "",
        seq: "",
        defpanelno: "",
      },
      tmpbact_testgroup: {},
      gpinfo: {},
      keyConfig: {
        isDel: true,
        isTab: true,
        isEdit: true,
        isArrow: true,
      },
      keyLocalConfig: {
        isArrow: true,
      },
      selectConfig: { tigger: "row" },
      tableData1: [],
      tableData2: [],
      pageinitloading: false,
      actionindex: "M",
      BactInstrument: [],

      selrow: [],
      AddData: [],
      ModData: [],
      form: {},
      showFile: false,
      url: "",
      updata: { action: "BACCOMMOMUPLOAD" }, 
    };
  },
  created() {
    this.GroupOption();
  },
  watch: {
    txtsearch(val) {
      let row = this.list[0];
      if (row) {
        this.hightLightRow(row);
      } else {
        this.hightLightRow(false);
      }
    },
  },
  computed: {
    list() {
      let filterName = this.txtsearch.trim();
      if (filterName) {
        let rest = this.tableData1.filter((item) => {
          return (
            item.testgroupno.toUpperCase().indexOf(filterName.toUpperCase()) >
              -1 ||
            (item.inputcode
              ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) >
                -1
              : false) ||
            (item.testgroupname
              ? item.testgroupname
                  .toUpperCase()
                  .indexOf(filterName.toUpperCase()) > -1
              : false)
          );
        });
        return rest;
      } else {
        return this.tableData1;
      }
    },
    kseq() {
      let len = this.$refs.xTable2.tableData.length;
      return (len + 1) * 10;
    },
  },
  mounted() {
    this.url = this.$tool.baseUrl.replace(/api/, "z") + "fileupload";
    this.InitOption();
  },
  updated() {},
  methods: {
    InitOption() {
      this.$tool
        .request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "InitOption",
          },
        })
        .then((res) => {
          this.BactInstrument = res.bactinstrument;
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    GroupOption() {
      this.$tool
        .request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "GroupOption",
          },
        })
        .then((res) => {
          this.gpinfo = res.gpinfo;
          this.groupsearch = res.gpinfo.Item3.labgroupid;
          this.InitPage(); //初始化主列表
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    groupsearchChange() {
      this.InitPage();
    },
    InitPage() {
      this.AddData = [];
      this.ModData = [];
      this.loading = true;
      this.$tool
        .request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "InitPage",
            groupsearch: this.groupsearch,
          },
        })
        .then((res) => {
          this.tableData1 = res.data;
          if (this.tableData1.length == 0) this.actionindex = "A";
          this.hightLightRow(res.data[0]);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 回车切换输入框
    nextFocus(index) {
      if (index > 7) return false;
      var that = this;
      var focusIndex = index + 1;
      setTimeout(function () {
        if (index == 7 || index == 6) {
          that.$refs["input" + index].blur();
        }
        that.$refs["input" + focusIndex].focus();
      }, 1);
    },
    chktestgroupno() {
      this.$tool
        .request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "chktestgroupno",
            testgroupno: this.bact_testgroup.testgroupno,
          },
        })
        .then((res) => {
          if (res == "1") {
            this.$alert("试验组合代码重复，请重新填写！");
            this.$refs.input0.focus();
          }
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    async hightLightRow(row) {
      if (!!row) {
        this.$refs.xTable1.setCurrentRow(row);
        await this.querydetail(row);
      } else {
        this.$refs.xTable1.setCurrentRow(null);
        this.bact_testgroup = {};
        this.tempbact_testgroup = {};
        this.tableData2 = [];
      }
    },
    async querydetail(row) {
      try {
        this.selrow = row;
        this.actionindex = "M";
        this.pageinitloading = true;
        const res = await this.$tool.request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "querydetail",
            testgroupno: row.testgroupno,
          },
        });
        if (res.bacttestgroup.length > 0) {
          this.bact_testgroup = res.bacttestgroup[0];
          this.tableData2 = res.bacttestgroupdet;
          this.$refs.xTable2.setCurrentRow(res.bacttestgroupdet[0]);
        } else {
          this.bact_testgroup = {};
          this.tableData2 = [];
          this.$refs.xTable2.setCurrentRow(null);
        }
        this.tmpbact_testgroup = XEUtils.clone(this.bact_testgroup, true);
        this.pageinitloading = false;
      } catch (e) {
        this.pageinitloading = false;
        this.$alert(e);
      }
    },
    btnAdd() {
      this.changeflag = true;
      this.actionindex = "A";
      this.bact_testgroup = {
        testgroupno: "",
        testgroupname: "",
        lathname: "",
        instrno: "",
        inputcode: "",
        seq: "",
        defpanelno: "",
      };
      this.tableData2 = [];
      this.$refs.input0.focus();
    },
    btnDelete() {
      this.$confirm("您确定要删除这条数据吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.actionindex = "D";
          this.startDelete();
        })
        .catch(() => {});
    },
    async startDelete() {
      try {
        var delrow = this.$refs.xTable1.getCurrentRow();
        if (delrow) {
          var alld = this.$refs.xTable1.tableData;
          var rowindex = alld.indexOf(delrow);
          this.$refs.xTable1.remove(delrow);
          await this.btnSave().then(() => {
            this.tableData1.splice(rowindex, 1);
            let havedata = this.$refs.xTable1.tableData;
            if (havedata.length > 0) {
              if (rowindex >= havedata.length) rowindex = havedata.length - 1;
              let selectrow = havedata[rowindex];
              this.hightLightRow(selectrow);
            } else {
              this.hightLightRow(false);
            }
          });
        }
      } catch (e) {
        console.log("error", e);
      }
    },
    async btnSave() {
      try {
        if (!this.bact_testgroup.testgroupno) {
          this.$alert("实验组合代码不能为空！");
          return false;
        }
        if (!this.bact_testgroup.instrno) {
          this.$alert("默认仪器不能为空！");
          return false;
        }
        let date = this.$refs.xTable2.tableData;
        date.sort((a, b) => {
          return a.seq - b.seq;
        });
        for (let i = 0, len = date.length; i < len; i++) {
          let tempseq = (i + 1) * 10;
          if (tempseq !== date[i].seq) {
            date[i].seq = tempseq;
          }
        }
        const res = await this.$tool.request({
          url: "LIS/LIS8/LIS845",
          method: "post",
          data: {
            action: "savedata",
            utype: this.actionindex,
            oldinfo: this.tmpbact_testgroup,
            newinfo: this.bact_testgroup,
            bacttestgroupdet: this.$refs.xTable2.getRecordset(),
          },
        });
        if (res.errcode == "1") {
          this.$pub.message(this, "操作成功！", "success");
          this.changeflag = false;
          if (this.actionindex == "A") {
            if (this.AddData.indexOf(this.bact_testgroup.testgroupno) == -1)
              this.AddData.push(this.bact_testgroup.testgroupno);
            this.$refs.xTable1.insert(this.bact_testgroup).then(({ row }) => {
              this.hightLightRow(row);
              this.tableData1.push(row);
            });
          } else if (this.actionindex == "M") {
            if (this.ModData.indexOf(this.bact_testgroup.testgroupno) == -1)
              this.ModData.push(this.bact_testgroup.testgroupno);
            await this.SetToTable(this.bact_testgroup).then((row) => {
              this.hightLightRow(row);
            });
          } else {
            this.actionindex = "M";
          }
        } else {
          this.$message.error("保存失败！" + res.errmsg);
        }
      } catch (e) {
        this.$alert(e);
      }
    },
    SetToTable(obj) {
      return new Promise((s, f) => {
        this.selrow.testgroupno = obj.testgroupno;
        this.selrow.testgroupname = obj.testgroupname;
        this.selrow.lathname = obj.lathname;
        this.selrow.instrno = obj.instrno;
        this.selrow.inputcode = obj.inputcode;
        this.selrow.seq = obj.seq;
        this.selrow.defpanelno = obj.defpanelno;
        this.selrow.testkind = obj.testkind;
        this.selrow.printbarcnt = obj.printbarcnt;
        s(this.selrow);
        return;
      });
    },
    btnExport() {
      let p = { prgno: "LIS845" };
      this.$pub.commexport(this, p, `鉴定组合/板条.dat`);
    },
    btnClear() {
      this.$confirm("您确定要取消这次改动吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.changeflag = false;
          this.querydetail(this.selrow);
        })
        .catch(() => {});
    },
    btnImport() {},
    async currentChangeEvent({ row }) {
      if (this.changeflag) {
        this.$refs.xTable1.setCurrentRow(this.selrow);
        return false;
      } else {
        await this.querydetail(row);
      }
    },
    activeMethod({ row }) {
      return true;
    },
    activeCell({ row }) {
      return false;
    },
    hasChange() {
      this.changeflag = true;
    },
    testchange(code, name) {
      this.hasChange();
    },
    rowClassName1({ row, rowIndex }) {
      if (this.AddData.indexOf(row.testgroupno) > -1) {
        return "row-new";
      }
      if (this.ModData.indexOf(row.testgroupno) > -1) {
        return "row-modify";
      }
    },
    rowClassName2({ row, rowIndex }) {
      let isDirty = this.$refs.xTable2.hasRowChange(row);
      if (isDirty) {
        return "row-modify";
      }
      if (this.$refs.xTable2.hasRowInsert(row)) {
        return "row-new";
      }
    }, //可写可输入暂时注释，如果后面是这种情况，直接取消注释即可使用
    // querySearch(queryString, cb) {
    //     var restaurants = this.BactInstrument;
    //     var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    //     // 调用 callback 返回建议列表的数据
    //     cb(results);
    // },
    // createFilter(queryString) {
    //     return restaurant => {
    //         return restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
    //     };
    // },
    // handleSelect(item) {
    //     this.changeflag = true;
    //     this.bact_testgroup.instrno = item.instrno;
    // },
    CreateInputcode() {
      this.bact_testgroup.inputcode = this.$pub.CreateInputcode(
        this.bact_testgroup.testgroupname,
        this,
        20
      );
    },
    testkindChange(e) {
      if ((this.tmpbact_testgroup.testkind == "3" && e != 3) || e == 3) {
        this.$confirm("您确定修改试验类别（该操作会清空试验明细）？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.hasChange();
            var delrow = this.$refs.xTable2.tableData;
            while (delrow.length > 0) {
              this.$refs.xTable2.remove(delrow[0]);
              delrow = this.$refs.xTable2.tableData;
            }
          })
          .catch((e) => {
            this.bact_testgroup.testkind = this.tmpbact_testgroup.testkind;
          });
      } else {
        this.hasChange();
      }
    },
    backinstrumentChange(code, name) {
      this.bact_testgroup.instrno = code;
      this.hasChange();
    },
    btnAddDetail() {
      this.$refs.xTable2
        .insertAt(
          {
            testgroupno: this.bact_testgroup.testgroupno,
            seq: this.kseq,
          },
          -1
        )
        .then(({ row }) => {
          this.$refs.xTable2.setCurrentRow(row);
          this.$refs.xTable2.scrollToRow(row);
          this.changeflag = true;
        });
    },
    btnDelDetail() {
      try {
        var delrow = this.$refs.xTable2.getCurrentRow();
        if (delrow) {
          var alld = this.$refs.xTable2.tableData;
          var rowindex = alld.indexOf(delrow);
          this.$refs.xTable2.remove(delrow);
          let havedata = this.$refs.xTable2.tableData;
          if (havedata.length > 0) {
            if (rowindex >= havedata.length) rowindex = havedata.length - 1;
            let selectrow = havedata[rowindex];
            this.$refs.xTable2.setCurrentRow(selectrow);
          } else {
            this.$refs.xTable2.setCurrentRow(null);
          }
          this.changeflag = true;
        }
      } catch (e) {
        console.log("error", e);
      }
      //this.$refs.xTable2.remove(this.$refs.xTable2.getCurrentRow()), (this.changeflag = true);
    },
    ImportCsv() {
        this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
        let size = file.size / 1024 / 1024;
        if (extension !== "dat") {
            this.$notify.warning({
                title: "警告",
                message: `只能上传DAT(*dat)文件，且不超过10M`,
            });
        }
        if (size > 10) {
            this.$notify.warning({
                title: "警告",
                message: `文件大小不得超过10M`,
            });
        }
    },
    uploadOpt(content) {
        let formData = new FormData();
        formData.append("action", "BACCOMMOMUPLOAD");
        formData.append("file", content.file);
        this.$tool
            .request({
                url: this.url,
                method: "post",
                data: formData,
            })
            .then((response) => {
                console.log(response);
                if (response.flag == 1) {
                    this.$notify.success({
                        title: "成功",
                        message: `文件上传成功`,
                    });
                    this.btnQuery();
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: response.msg,
                    });
                }
            })
            .catch((e) => {});
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
        this.form.file = file.raw;
    },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 605px;
  overflow: auto;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 600px;
  right: 0px;
}
/deep/ .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
.search-title {
  margin: 0 5px 0 20px;
  font-size: 12px;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue;
}
/deep/ tr.vxe-body--row.row-new {
  color: #cc6600;
}
.table1style tr td {
  padding: 0px 2px 0px 2px;
}
.upload-button {
    height: 24px;
    margin: 0 10px;
    display: none;
}
.upload-button div {
    height: 24px;
}
</style>
